<template>
  <div class="c-page-header" :class="props.border ? 'c-page-header--border' : ''">
    <div class="c-page-header__left">
      <el-button
        class="c-btn32 header-left__back-icon"
        text
        v-if="props.isBack"
        @click="handleGoBack"
      >
        <CIcon type="c-xian-jianzuo"></CIcon>
      </el-button>
      <span class="header-left__title">{{ props.title }}</span>
      <el-tooltip :content="props.explainText" v-if="props.explainText">
        <CIcon class="header-left__explain" type="c-xian-shuoming"></CIcon>
      </el-tooltip>
      <template v-if="props.descText">
        <el-divider class="header-left__divider" direction="vertical"></el-divider>
        <span class="header-left__desc">{{ props.descText }}</span>
      </template>

      <div class="header-left__tabs" v-if="localTabList?.length">
        <div
          class="left-tabs_item"
          :class="localActiveTab === tab.value ? 'is-active' : ''"
          @click="handleClickTabItem(tab.value)"
          v-for="tab in localTabList"
          :key="tab.value"
          >{{ tab.label }}</div
        >
      </div>
    </div>
    <div class="c-page-header__right">
      <slot name="headerRightButton"> </slot>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: 'CPageHeader'
};
</script>
<script lang="ts" setup name="CPageHeader">
import { defineProps, defineEmits, ref, reactive, watch, computed } from 'vue';
import { useRouter } from 'vue-router';
import { pageHeaderProps } from './page-header';

const props = defineProps(pageHeaderProps);
const emits = defineEmits(['changeTab']);
const router = useRouter();

/**
 * searchForm的映射
 */
const componentSearchForm = reactive(props.searchForm);

const localActiveTab = computed(() => {
  return componentSearchForm[headerTabField.value];
});

const headerTabOptionItem = computed(() => {
  const opts = props.searchOptions.filter(n => n.type === 'headerTab');
  return opts?.length ? opts[0] : undefined;
});

const headerTabField = computed(() => {
  return headerTabOptionItem.value?.field || '';
});

const localTabList = computed(() => {
  return headerTabOptionItem.value?.headerTabList || [];
});

function handleClickTabItem(tabValue: string) {
  componentSearchForm[headerTabField.value] = tabValue;
  console.log('handleClickTabItem', tabValue, componentSearchForm);
  if (headerTabOptionItem.value?.onSearchFormChange) {
    headerTabOptionItem.value?.onSearchFormChange(componentSearchForm);
  } else {
    emits('changeTab', componentSearchForm);
  }
}

const handleGoBack = () => {
  router.go(-1);
};
</script>

<style lang="scss">
@use '../styles/index.scss' as *;
</style>
